<template>
    <div class="com-cnt">
        <div class="listme">
            <div class="tab">
                <ul class="clearfix">
                    <li class="fl">日期</li>
                    <li class="fl">金额</li>
                    <li class="fl">银行卡</li>
                    <li class="fl">状态</li>
                </ul>
            </div>
            <div class="tabs" v-if="list.length !== 0">
                <ul class="clearfix" v-for="lists in list">
                    <li class="fl">{{lists.time}}</li>
                    <li class="fl">{{lists.cash_amont}}</li>
                    <li class="fl">{{lists.id_bank}}</li>
                    <li class="fl">{{lists.progress}}</li>
                </ul>
            </div>
            <div v-else :style="emptyimg" style="width:100%;height:100%">

            </div>
        </div>
        <!-- <ul v-if="list.length !== 0">
            <li v-for="lists in list">
                <div>
                    <span class="li_top_l">{{lists.progress}}</span>
                    <span class="li_top_r">佣金{{lists.money}}</span>
                </div>
                <div>
                    <span class="li_bot_l">{{lists.time}}</span>
                </div>
            </li>
        </ul> -->

    </div>
</template>

<script>
import axios from 'axios'
import http from "@/assets/js/axios"
import https from "@/assets/js/axiosh"
import { domain } from '@/assets/js/config'
import { domains } from '@/assets/js/config'
import $ from 'jquery'
import { maskTips } from '@/assets/js/dom'
export default {
    data() {
        return {
            list: [],
            emptyimg: {
                backgroundImage: "url(" + require("@/assets/imgs/manage/yeempty.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100%",
                marginTop: "5px"
            }
        }
    },
    components: {

    },
    mounted() {
        // 调用getReason方法
        this.getReason();
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        // 余额明细
        getReason: async function () {
            let that = this
            let userInfo = JSON.parse(sessionStorage.getItem('UserInfo'));
            let userToken = localStorage.getItem("tokens") || ''
            const res = await https.post('/f/agent/home/withdrawRecord?token=' + userToken)
            // console.log(res);
            if (res.data.code == -5) {
                maskTips({ id: "bal-fail", txt: res.data.message })
                that.$router.push('/agApply')
                return false;
            }
            if (res.status == 200) {
                if (res.data.data) {
                    this.list = res.data.data;
                } else {
                    this.list = []
                }

            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: 80%;
    position: relative;
    z-index: 99;
    background: #ffffff;

    .listme {
        div.tab {
            padding: 10px 15px;
            border-bottom: 1px solid rgba(240, 240, 240, 1);

            ul {
                text-align: center;

                li {
                    width: 25%;
                    font-size: 14px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(153, 153, 153, 1);
                }
            }
        }

        div.tabs {
            padding: 10px 15px;

            ul {
                text-align: center;
                margin: 10px 0;

                li {
                    width: 25%;
                    font-size: 12px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                }
            }
        }
    }
}
</style>
